<template>
  <div>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" size="small" v-has="'dashboard/menuSave'" @click="addDialogVisible = true">添加菜单</el-button>
        </el-col>
      </el-row>
      <el-table :data="menuInfo" border stripe v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading">
        <el-table-column prop="id" label="id" type="selection" fixed></el-table-column>
        <el-table-tree-column fixed :expand-all="!!!1" child-key="child" file-icon="icon icon-file"
                              folder-icon="icon icon-folder"
                              levelKey='level'
                              prop="title" label="名称" :show-overflow-tooltip="true" :indent-size="20"
                              parentKey='parent_id'
                              treeKey='id'>
        </el-table-tree-column>
        <el-table-column prop="name" label="路由"></el-table-column>
        <el-table-column prop="level" label="等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level === 0">一级</el-tag>
            <el-tag v-else-if="scope.row.level === 1" type="success">二级</el-tag>
            <el-tag v-else="scope.row.level === 2" type="warning">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类别">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.type === 1">系统功能</el-tag>
            <el-tag v-else="scope.row.level === 2" type="warning">用户功能</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="添加子菜单" placement="top" :enterable="false">
              <el-button type="success" icon="el-icon-plus" v-has="'dashboard/child_save'" size="mini"
                         @click="addChildMenuDialog(scope.row.id,scope.row.title)"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" v-has="'dashboard/menuSave'" size="mini" @click="editMenuDialog(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" v-has="'dashboard/menuDel'" size="mini" @click="delMenu(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增菜单 -->
      <el-dialog title="添加菜单" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose">
        <el-form :model="addMenuForm" :rules="addMenuRule" ref="addMenuRef" label-width="70px">
          <el-form-item label="菜单类别" prop="type">
            <el-select v-model="addMenuForm.type" placeholder="请选择菜单类别" style="width:100%">
              <el-option v-for="menu in menuType" :index="menu.id + ''" :key="menu.id" :label="menu.name"
                         :value="menu.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="title">
            <el-input v-model="addMenuForm.title"></el-input>
          </el-form-item>
          <el-form-item label="路由" prop="name">
            <el-input v-model="addMenuForm.name"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="addMenuForm.icon"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="addMenuForm.sort"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-switch v-model="addMenuForm.status"></el-switch>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="addMenuForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              <el-button @click="addDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addMenu">确 定</el-button>
          </span>
      </el-dialog>
      <!-- 新增子菜单 -->
      <el-dialog title="添加子菜单" :visible.sync="addChildMenuDialogVisible" width="50%" @close="addChildMenuDialogClose">
        <el-form :model="addChildMenuForm" :rules="addChildMenuRule" ref="addChildMenuRef" label-width="70px">
          <el-form-item label="菜单类别" prop="type">
            <el-select v-model="addChildMenuForm.type" placeholder="请选择菜单类别" style="width:100%">
              <el-option v-for="menu in menuType" :index="menu.id + ''" :key="menu.id" :label="menu.name"
                         :value="menu.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="parent_id" prop="parent_id" hidden>
            <el-input v-model="addChildMenuForm.parent_id"></el-input>
          </el-form-item>
          <el-form-item label="上级" prop="parent_title">
            <el-input v-model="addChildMenuForm.parent_title" disabled></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="title">
            <el-input v-model="addChildMenuForm.title"></el-input>
          </el-form-item>
          <el-form-item label="路由" prop="name">
            <el-input v-model="addChildMenuForm.name"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="addChildMenuForm.icon"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="addChildMenuForm.sort"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-switch v-model="addChildMenuForm.status"></el-switch>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="addChildMenuForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              <el-button @click="addChildMenuDialogClose = false">取 消</el-button>
              <el-button type="primary" @click="addChildMenu">确 定</el-button>
          </span>
      </el-dialog>
      <!-- 编辑菜单 -->
      <el-dialog title="编辑菜单" :visible.sync="editMenuDialogVisible" width="50%" @close="editMenuDialogClose">
        <el-form :model="editMenuForm" :rules="editMenuRule" ref="editMenuRef" label-width="70px">
          <el-form-item label="菜单类别" prop="type">
            <el-select v-model="editMenuForm.type" placeholder="请选择菜单类别" style="width:100%">
              <el-option v-for="menu in menuType" :index="menu.id + ''" :key="menu.id" :label="menu.name"
                         :value="menu.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="父级" prop="parent_id">
            <el-select-tree :default-expand-all="defaultExpandAll"
                            :multiple="multiple"
                            :placeholder="placeholder"
                            :disabled="disabled"
                            :disabled-values="disabledValues"
                            :data="menuInfo"
                            :props="treeProps"
                            :check-strictly="checkStrictly"
                            :clearable="clearable"
                            v-model="value" style="width:100%"></el-select-tree>
          </el-form-item>
          <el-form-item label="名称" prop="title">
            <el-input v-model="editMenuForm.title"></el-input>
          </el-form-item>
          <el-form-item label="路由" prop="name">
            <el-input v-model="editMenuForm.name"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input v-model="editMenuForm.icon"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model="editMenuForm.sort"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-switch v-model="editMenuForm.status"></el-switch>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="editMenuForm.remark"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
              <el-button @click="editMenuDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editMenu">确 定</el-button>
          </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import ElSelectTree from 'el-select-tree';
export default {
  components: {
    ElSelectTree
  },
  data() {
    let checkSort = (rule, value, callback) => {
      const regSort = /^(?:[1-9]?\d|100)$/;
      if (regSort.test(value)) {
        return callback()
      }
      callback(new Error('请输入0-100的整数'))
    }
    return {
      queryInfo: {
        name: '',
        type: 'child'
      },
      loading:true,
      clearable: true,
      defaultExpandAll: false,
      multiple: false,
      placeholder: '请选择父级',
      disabled: false,
      checkStrictly: true,
      treeProps: {
        value: 'id',
        children: 'child',
        label: 'title'
      },
      value: '',
      disabledValues: [],
      menuInfo: [],
      //菜单类别
      menuType: [],
      addDialogVisible: false,
      addChildMenuDialogVisible: false,
      editMenuDialogVisible: false,
      addMenuForm: {
        title: '',
        name: '',
        sort: '',
        remark: '',
        status: true,
        icon: '',
        type: 1
      },
      addChildMenuForm: {
        parent_id: '',
        parent_title: '',
        title: '',
        name: '',
        sort: '',
        remark: '',
        status: true,
        icon: '',
        type: 1
      },
      editMenuForm: {
        parent_id: '',
        title: '',
        name: '',
        sort: '',
        remark: '',
        status: true,
        icon: '',
        type: 0
      },
      editMenuRule: {
        title: [
          {required: true, message: '菜单名称不能为空', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '路由不能为空', trigger: 'blur'},
        ],
        sort: [
          {required: true, message: '排序不能为空', trigger: 'blur'},
          {validator: checkSort, trigger: 'blur'}
        ],
        icon: [
          {required: true, message: '图标不能为空', trigger: 'blur'},
        ]
      },
      addMenuRule: {
        title: [
          {required: true, message: '菜单名称不能为空', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '路由不能为空', trigger: 'blur'},
        ],
        sort: [
          {required: true, message: '排序不能为空', trigger: 'blur'},
          {validator: checkSort, trigger: 'blur'}
        ],
        icon: [
          {required: true, message: '图标不能为空', trigger: 'blur'},
        ]
      },
      addChildMenuRule: {
        title: [
          {required: true, message: '菜单名称不能为空', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '路由不能为空', trigger: 'blur'},
        ],
        sort: [
          {required: true, message: '排序不能为空', trigger: 'blur'},
          {validator: checkSort, trigger: 'blur'}
        ],
        icon: [
          {required: true, message: '图标不能为空', trigger: 'blur'},
        ]
      }
    }
  },
  created() {
    this.getMenuInfo()
    this.getMenuType()
  },
  methods: {
    async getMenuType() {
      const {data: res} = await this.$http.get('dashboard/menuType')
      if (res.code !== 200) return this.$message.error('获取菜单列表失败')
      this.menuType = res.data.list
      this.loading = false
    },
    addDialogClose() {
      this.$refs.addMenuRef.resetFields()
    },
    addChildMenuDialogClose() {
      this.$refs.addChildMenuRef.resetFields()
    },
    editMenuDialogClose() {
      this.disabledValues = []
      this.$refs.editMenuRef.resetFields()
    },
    async getMenuInfo() {
      const {data: res} = await this.$http.get('dashboard/menu_list', {params: this.queryInfo})
      if (res.code !== 200) return this.$message.error('获取菜单列表失败')
      this.menuInfo = res.data.list
    },
    //新增菜单
    addMenu() {
      this.$refs.addMenuRef.validate(async valid => {
        if (!valid) return this.$message.error('输入不合法')
        const {data: result} = await this.$http.post('dashboard/menuSave', this.addMenuForm)
        if (result.code !== 200) return this.$message.error(result.data.message)
        this.$message.success('添加菜单成功')
        this.addDialogVisible = false
        this.getMenuInfo()

      })
    },
    //子菜单赋值
    addChildMenuDialog(id, title) {
      this.addChildMenuForm.parent_id = id
      this.addChildMenuForm.parent_title = title
      this.addChildMenuDialogVisible = true;
    },
    //新增子菜单
    addChildMenu() {
      this.$refs.addChildMenuRef.validate(async valid => {
        if (!valid) return this.$message.error('输入不合法')
        const {data: result} = await this.$http.post('dashboard/child_save', this.addChildMenuForm)
        if (result.code !== 200) return this.$message.error(result.data.message)
        this.$message.success('添加子菜单成功')
        this.addChildMenuDialogVisible = false
        this.getMenuInfo()
      })
    },
    editMenuDialog(menuInfo) {
      // const id = menuInfo.id
      // this.disabledValues.push(id)
      this.editMenuForm.title = menuInfo.title
      this.editMenuForm.name = menuInfo.name
      this.editMenuForm.sort = menuInfo.sort
      this.editMenuForm.remark = menuInfo.remark
      if (menuInfo.status === 1) {
        this.editMenuForm.status = true
      } else {
        this.editMenuForm.status = false
      }
      this.$set(this.editMenuForm, 'id', menuInfo.id)
      this.editMenuForm.icon = menuInfo.icon
      this.editMenuForm.type = menuInfo.type
      this.value = menuInfo.parent_id
      this.editMenuDialogVisible = true
    },
    editMenu() {
      this.editMenuForm.parent_id = this.value
      this.$refs.editMenuRef.validate(async valid => {
        if (!valid) return this.$message.error('输入不合法')
        const {data: result} = await this.$http.post('dashboard/menuSave', this.editMenuForm)
        if (result.code !== 200) return this.$message.error(result.data.message)
        this.$message.success('编辑用户成功')
        this.editMenuDialogVisible = false
        this.getMenuInfo()

      })
    },
    async delMenu(id){
      const configResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err);
      if (configResult !== 'confirm') return this.$message.info('已取消删除')
      const {data: result} = await this.$http.get('dashboard/menuDel/' + id)
      if (result.code !== 200) return this.$message.error(result.data.message)
      this.$message.success('删除成功')
      this.getMenuInfo();
    }
  }
}
</script>

<style scoped>

</style>
